<template>
  <div id="productHome">
    <el-tabs v-model="active"
             type="card"
             @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label">
          Products ( {{totalProducts| priceFilter}} )
        </span>
        <product-list></product-list>
      </el-tab-pane>
      <el-tab-pane name="second"
                   :disabled="canAnalysis">
        <span slot="label">
          {{'Analysis '+ anylysisLabel}}
          <i class="el-icon-arrow-down"
             :class="{'rotate': showAnalysis}"
             @click="selectAnalysis"></i>
        </span>
        <select-analysis v-if="showAnalysis"
                         @changeMode="changeMode"></select-analysis>
        <product-analysis ref="productAnalysis"></product-analysis>
      </el-tab-pane>
    </el-tabs>
    <product></product>
  </div>
</template>

<script>
import productAnalysis from "./productAnalysis/productAnalysis.page";
import productList from "./productList/productList.page";
import product from "./productList/product.page";
import selectAnalysis from "./productAnalysis/selectAnalysis.d";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      beforeName: "first",
      active: "first",
      showAnalysis: false,
      mode: "series",
      imgs: [1, 2, 3, 4],
      activeItem: {}
    };
  },
  created() {
    this.$store.commit("toggleFold", true);
  },
  computed: {
    anylysisLabel() {
      if (this.active === "first") {
        return "Collection";
      } else {
        switch (this.chartShow) {
          case "series":
            return "Collection";
          case "material":
            return "Material";
          case "color":
            return "Color";
          case "type":
            return "Category";
          case "priceIndex":
            return "Pricing";
          case "history":
            return "History";
          case "newIn":
            return "New In";
        }
      }
    },
    canAnalysis() {
      if (
        this.selectCountry.length ||
        this.selectCondition.length ||
        this.selectRetailer.length ||
        this.selectBrands.length ||
        this.selectMaterial.length ||
        this.selectColor.length ||
        this.selectType.length
      ) {
        return false;
      } else {
        return true;
      }
    },
    ...mapGetters(["chartShow", "totalProducts", "productOrList", "title"])
  },
  methods: {
    handleClick(val) {
      if (this.active === "second" && this.beforeName === "first") {
        // tab1 跳 tab2
        this.$refs.productAnalysis.init();
      } else if (this.active === "first" && this.beforeName === "second") {
        // tab2 跳 tab1
        this.$refs.productAnalysis.destory();
        this.showAnalysis = false;
      }
      this.beforeName = this.active;
      this.$store.commit("changeActiveName", this.active);
    },
    selectAnalysis() {
      if (this.active === "second") {
        this.showAnalysis = !this.showAnalysis;
      }
    },
    changeMode(val) {
      this.showAnalysis = false;
      this.$store.commit("chartShowChange", val);
    }
  },
  components: {
    productAnalysis,
    productList,
    product,
    selectAnalysis
  },
  watch: {}
};
</script>

<style lang="scss">
@import "../../assets/styles/color.scss";
@import "../../assets/styles/mixins.scss";

#productHome {
  .el-tabs {
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__header {
      position: static;
      margin-bottom: 0;
      background-color: $headColor;
      height: 2.2rem;
      // border-bottom: 1px solid $headColor;
      .el-tabs__item {
        color: #fff;
        // border-bottom: none;
        // overflow: hidden;
        border-bottom: 1px solid $bgColor;
        box-sizing: border-box;
        height: 2.2rem;
        border: none;
        background-color: $tabColor;
        font-size: 0.8rem;
        &.is-active {
          color: $base;
          background-color: $bgColor;
        }
        &:hover {
          color: $base;
        }
        .rotate {
          transition: 0.3s;
          transform: rotate(-180deg);
        }
      }
    }
  }
}
</style>
